<template>
  <div class="search">
    <div class="top">
      <div class="topOne">
        <h2>文章搜索</h2>
        <el-icon @click="$router.push('/layout/article')"><Close /></el-icon>
      </div>
      <div class="topTwo">
        <el-input
          @keyup.enter.native="search"
          v-model="name"
          placeholder="输入关键字，搜索文章"
        />
      </div>
    </div>
    <div v-if="date">
      <dl v-for="(v, i) in date" :key="i" class="dl">
        <p>
         <span class="history">
           <b @click="detail(v)">{{ v.title }}</b>
         </span>
        </p>
      </dl>
    </div>
    <div v-else>暂无数据</div>
  </div>
</template>

<script>
import { Close } from "@element-plus/icons-vue";
import { asyncSearch, asyncArticleLists } from "../../api/article";
export default {
  components: {
    Close,
  },
  data() {
    return {
      name: "",
      articleLists: [],
      date: [],
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.article();
    },
    async article() {
      const res = await asyncArticleLists("/articleImg");
      this.articleLists = res.data.list;
      console.log(res);
    },
    async search() {
      if (this.name === "") {
        alert("搜搜内容不为空");
      } else {
        this.date = this.articleLists.filter((v) =>
          v.title.includes(this.name));
        
        const res = await asyncSearch("/search", { name: this.name });
      }
    },
    detail(v) {
      this.$router.push({
        path: "/layout/detail",
        query: {
          detailId: v.id,
        },
      });
    },
  },
};
</script>

<style scoped lang="less">
* {
  padding: 0;
  margin: 0;
}
body,
html {
  width: 100%;
  height: 100%;
}
.search {
  width: 100%;
  height: 100vh;
  background: #fff;
}
.top {
  display: flex;
  align-items: center;
  /* justify-content: space-around; */
  flex-direction: column;
  padding: 40px;
}
.topOne {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-around;
  padding: 10px;
}
.topTwo {
  width: 55%;
  padding: 10px;
}

input {
  width: 80%;
}
.dl {
  position: relative;
  .history{
    position: absolute;
    // margin-top: 10px;
    background: #eee;
    width: 64%;
    margin-left: 360px;
    margin-top: -55px;
  b {
    padding: 5px;
  }
}
  width: 80%;
  display: flex;
  flex-direction: column;
  padding: 10px;

  img {
    width: 40%;
    padding: 5px;
  }

  dt {
    display: flex;
    // align-items: flex-start;
    // flex-wrap: wrap;
    flex-shrink: 0;
    // position: relative;
    span {
      padding: 10px;
    }
    p {
      display: flex;
      flex-direction: column;

      .icons {
        // bottom: 10px;
        // position: absolute;
        // left: 250px;
        margin-top: 80px;
      }
    }
  }
}
</style>